<template>
    <div class="shopbag">
        <!-- 导航栏 -->
        <Back
            :sticky="true"
            :title="'购物袋'"
            :right_txt="user && isHas ? editComplete : ''"
            @edit="edit"
        />
        <!-- 背景图盒 -->
        <div class="bgImg"></div>

        <!-- 购物袋详情盒 -->
        <div class="shopbagBox" v-if="user">
            <!-- 商品 -->
            <ShopbagItem
                v-for="(item, index) in allWaresData"
                :key="item.sid"
                :itemData="item"
                @simpleCheck="simpleCheck"
                @count="countPost(item.sid, $event)"
                @remove="removeOne(item, index)"
            />

            <div v-show="isHas">
                <div class="aiye">哎呀，没有数据可加载了！</div>

                <!-- 下方的功能块 -->
                <van-submit-bar
                    :price="totalprice"
                    button-text="提交订单"
                    v-show="!editState"
                    @submit="goOrderSettlement"
                >
                    <!-- 全选 -->
                    <van-checkbox
                        v-model="allChecked"
                        checked-color="#3948bf"
                        @click="allSelect"
                        >全选</van-checkbox
                    >
                </van-submit-bar>
                <van-submit-bar
                    @submit="confirmMultipleDeletions"
                    button-text="删除选中"
                    class="all"
                    v-show="editState"
                >
                    <!-- 全选 -->
                    <van-checkbox
                        v-model="allChecked"
                        checked-color="#3948bf"
                        @click="allSelect"
                        >全选</van-checkbox
                    >
                </van-submit-bar>
            </div>
        </div>
        <div v-else>
            <van-empty description="请先登录">
                <van-button
                    round
                    type="danger"
                    class="bottom-button"
                    @click="goPage('Logon')"
                    >登录</van-button
                >
            </van-empty>
        </div>
        <div v-if="user && !isHas">
            <van-empty description="购物袋空空如也!">
                <van-button
                    round
                    type="danger"
                    class="bottom-button"
                    @click="goPage('Menu')"
                    >去逛一逛</van-button
                >
            </van-empty>
        </div>
    </div>
</template>

<script>
// 导入公共组件
import Back from '../components/Back.vue'
import ShopbagItem from '../components/ShopbagItem.vue'
import { Dialog } from 'vant';

export default {
    name: 'Shopbag',

    // 注册子组件
    components: {
        Back, ShopbagItem
    },
    data() {
        return {
            //编辑按钮的文本
            editComplete: "编辑",
            //编辑状态
            editState: false,
            // 用户的登录状态
            user: true,

            // 全选按钮 状态
            allChecked: false,

            // 全部商品数据
            allWaresData: [],
        }
    },
    methods: {
        // 切换编辑状态
        edit() {
            this.editState = !this.editState;
            this.editComplete = this.editState ? "完成" : "编辑";
        },

        //跳转页面
        goPage(name) {
            this.$router.push({ name });
        },

        // 请求用户购物袋的 商品数据
        getFindAllShopcart() {
            this.axios({
                method: "GET",
                url: "/findAllShopcart",
            }).then((result) => {
                

                if (result.data.code === 700) {
                    this.user = false;
                    return
                }
                if (result.data.code === 5000) {

                    result.data.result.forEach(v => {
                        v.checked = false;
                    })

                    this.allWaresData = result.data.result;

                    
                }

            }).catch((err) => {
                
            });
        },

        //单选
        simpleCheck() {
            //寻找没有勾选的单选 ==> 改变全选按钮状态
            for (let i = 0; i < this.allWaresData.length; i++) {
                if (!this.allWaresData[i].checked) {
                    this.allChecked = false;
                    return;
                }
            }

            this.allChecked = true;
        },
        //全选
        allSelect() {
            
            this.allWaresData.forEach(v => {
                v.checked = this.allChecked;
            })
        },
        // 改变后台 商品数量
        countPost(sid, e) {
            // 
            // 
            this.axios({
                method: 'post',
                url: '/modifyShopcartCount',
                data: {
                    count: e.count,
                    sid
                }
            }).then(res => {
                
                //用户未登录, 跳转到登录页面
                if (res.data.code === 700) {
                    return this.$router.push({ name: 'Login' });
                }

            }).catch(err => {
                
            })
        },

        // 删除单个
        removeOne(item, index) {
            
            
            this.axios({
                method: 'post',
                url: '/deleteShopcart',
                data: {
                    sids: JSON.stringify([item.sid])
                }
            }).then(res => {
                

                //用户未登录, 跳转到登录页面
                if (res.data.code === 700) {
                    return this.$router.push({ name: 'Login' });
                }

                if (res.data.code === 7000) {
                    this.$toast('删除成功');
                    this.allWaresData.splice(index, 1);
                    this.simpleCheck();
                } else {
                    this.$toast('删除失败');
                }
            }).catch(err => {
                
            })


        },

        // 确认 多个删除
        confirmMultipleDeletions() {
            Dialog.confirm({
                message: '确定删除选中吗？',
            }).then(() => {
                this.removeCheck()
            }).catch(() => { });
        },

        // 删除多个
        removeCheck() {
            
            if (this.sidCheck.length === 0) {
                return this.$toast('请选择商品');
            }
            this.axios({
                method: 'post',
                url: '/deleteShopcart',
                data: {
                    sids: JSON.stringify(this.sidCheck)
                }
            }).then(res => {
                

                //用户未登录, 跳转到登录页面
                if (res.data.code === 700) {
                    return this.$router.push({ name: 'Login' });
                }

                if (res.data.code === 7000) {
                    this.$toast('删除成功');
                    for (let i = 0; i < this.allWaresData.length; i++) {

                        //如果sid在this.sidCheck, 则删除该商品
                        if (this.sidCheck.indexOf(this.allWaresData[i].sid) > -1) {
                            this.allWaresData.splice(i, 1);
                            i--;
                        }
                    }
                } else {
                    this.$toast('删除失败');
                }
            }).catch(err => {
                
            })
        },

        // 提交订单 跳转到订单结算页面
        goOrderSettlement() {
            
            if (this.sidCheck.length === 0) {
                return this.$toast('请选择商品');
            }
            this.$router.push({ name: "OrderSettlement", query: { sids: JSON.stringify(this.sidCheck) } });
        }
    },



    // 属性计算
    computed: {
        // 总价格
        totalprice() {
            let total = 0;
            this.allWaresData.forEach((v) => {
                if (v.checked) {
                    total += v.count * v.price
                }
            })
            return total * 100
        },


        //是否存在购物袋数据
        isHas() {
            return this.allWaresData.length > 0;
        },

        // 记录 勾选商品的sid
        sidCheck() {
            let sidArray = [];
            this.allWaresData.forEach(v => {
                if (v.checked) {
                    sidArray.push(v.sid);
                }
            })

            return sidArray
        }
    },



    // 初始化钩子
    created() {
        //获取 查询用户所有购物袋数据 
        this.getFindAllShopcart();
    },
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__text {
    color: #646566;
}
/deep/ .van-submit-bar {
    bottom: 50px;
}
/deep/ .van-empty {
    margin-top: 90px;
    .bottom-button {
        width: 160px;
        height: 40px;
    }
}

.bgImg {
    height: 50px;
    background: url(../assets/shopbag_bg.png) no-repeat center center;
    background-size: cover;
}
.shopbagBox {
    background-color: rgb(240, 248, 255);
    z-index: -1;
    position: fixed;
    left: 0;
    right: 0;
    top: 96px;
    bottom: 50px;
    overflow: scroll;

    .aiye {
        color: #aaa;
        margin-top: 30px;
        text-align: center;
        font-size: 14px;
        margin-bottom: 70px;
    }

    .all {
        /deep/ .van-submit-bar__bar {
            justify-content: space-between;
            button {
                background: #cccccc;
            }
        }
    }

    /deep/ .van-submit-bar__button--danger {
        background: #e99036;
    }
}
</style>